<script setup lang="tsx">
import OsIcon from "./OsIcon.vue";
import { setup } from "@/utils/setup";
import { NSelect, NText } from "naive-ui";
import type { SelectMixedOption } from "naive-ui/es/select/src/interface";
import { computed, onUnmounted } from "vue";

const { configStore, storageStore } = setup();

const options = computed(() => {
  return (
    configStore.config?.hosts
      .map((host) => ({ host, storage: storageStore.cache[host.id] }))
      .map(
        ({ host, storage }): SelectMixedOption => ({
          label: () => (
            <div style="display: flex; align-items: center">
              <OsIcon
                style="margin: 10px 10px 10px 0"
                value={storage?.os.name}
                size={32}
              />
              <NText>{host.name}</NText>
            </div>
          ),
          value: host.id,
        })
      ) ?? []
  );
});

storageStore.startTimer();
onUnmounted(storageStore.stopTimer);
</script>

<template>
  <NSelect :options="options" :renderTag="({ option: { value } }) => value" />
</template>
